<template>
	<view style="height: 100vh;">
		<u-empty v-if="groupChat.length ==0 && list.普通聊天==0" mode="data"
			icon="http://cdn.uviewui.com/uview/empty/data.png" style="margin-top:50% ;">
		</u-empty>
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<view class="edit" @tap="createAgroup()">
					创建群聊
				</view>
			</block>
		</hx-navbar>
		<!-- 导航选项开始 -->
		<!-- 		<view style="width: 100%;height:206rpx;background: #ffffff;">
			<view class="flex flex-wrap">
				<view class="otherfu" v-for="(item, index) of cid" @tap="switchTab(item.id)">
					<view>
						<image style="width:64rpx;height:64rpx;" :src="item.Image" mode="">
						</image>
					</view>
					<view style="font-size: 28rpx;color:#1E1E1E;margin-top: 16rpx;etter-spacing: 29px;">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view> -->
		<!-- 导航选项结束 -->
		<!-- 		<view>
			<view v-for="(item, index) in  systemMessage" :key="index" v-if="index <1"
				style="background: #ffffff;padding: 10rpx ;">
				<view class="flex justify-between align-center" @tap="goSystem(item)">
					<view class="flex align-center">
						<image src="../../static/cliend/system.png" mode="aspectFit"
							style="width: 84rpx;height:84rpx;border-radius: 50%;"></image>
						<view style="margin-left: 20rpx;">
							<view
								style="color: #1E1E1E;font-size: 32rpx;font-weight:600; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200rpx;">
								{{item.headline}}
							</view>
							<view
								style="color: #1E1E1E;opacity: .3;font-size: 28rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200rpx;">
								{{item.information}}
							</view>
						</view>
					</view>
					<view style="color: #1E1E1E;opacity: .3;margin-right: 20rpx;">{{item.createTime}}</view>
				</view>
			</view> -->
		<!-- 系统消息结束 -->
		<!-- 消息列表开始 -->
		<u-collapse accordion v-if="groupChat!=''" :value="'1'">
			<u-collapse-item ref="collapseView" title="群聊"
				style="background: #FFFFFF;border: none;margin: 20rpx 0;font-weight: 700;" name="1">
				<view v-for="(item,index) in groupChat" :key="index"
					@click="vdrtdr(item.groupNum,item.userVos,item.name)">
					<view class="flex align-center justify-between" style="margin-bottom: 30rpx;">
						<view class="flex align-center" style="width: 122rpx;height: 120rpx;flex-wrap: wrap;">
							<view class="flex align-center"
								style="width: 122rpx;height: 120rpx;flex-wrap: wrap;justify-content:center;">
								<view v-for="(i,e) in item.userVos" :key="e">
									<image mode="aspectFit" v-if="e<9" :class="func(item.userVos.length)"
										:src="i.avatar"></image>
								</view>
							</view>
						</view>
						<view style="margin-left: 30rpx;flex: 1;">
							<view class="flex justify-between">
								<view>{{item.name}}</view>
								<view v-show="item.createTime!=1">{{item.createTime}}</view>
							</view>
							<view class="flex justify-between">
								<view style="color: rgba(30,30,30,0.3);font-size: 28rpx;margin-top: 20rpx;">
									{{item.content}}
								</view>
								<view v-if="item.unReadCount!=0" class="msese" style="margin-top:30rpx ;">
									{{item.unReadCount}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="groupChat.length==0"><u-empty mode="car"
						icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty></view>
			</u-collapse-item>
		</u-collapse>
		<view v-for="(item,key) in list" :key="key"
			style="background: #FFFFFF;border: none;margin: 20rpx 0;font-weight: 700;">
			<view v-for="(subItem, index) in item" style="margin:30rpx 0;">
				<view class="flex justify-between align-center" @tap="gogits(subItem)">
					<view class="flex align-center">
						<image :src="subItem.avatar" mode="aspectFit"
							style="width: 84rpx;height:84rpx;border-radius: 50%;"></image>
						<view style="margin-top: 2rpx;margin-left: 5rpx;">
							<view
								style="color: #1E1E1E;font-size: 32rpx;font-weight:600; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200rpx;">
								{{subItem.title}}
							</view>
							<view class="flex align-center">
								<view
									style="color: #1E1E1E;opacity: .3;font-size: 28rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 200rpx;margin-top: 10rpx;">
									{{subItem.content}}
								</view>
								<!-- 		<u-tag :text="role[subItem.type]" plain size="mini" type="warning"></u-tag> -->
							</view>
						</view>
					</view>
					<view style="color: #1E1E1E;opacity: .3;margin-right: 20rpx;">{{subItem.time}}</view>
				</view>
			</view>
		</view>
		<!-- 消息列表结束 -->
	</view>
	</view>
</template>

<script>
	import {
		pathToBase64
	} from '@/common/jsdck/index.js'
	import {
		webScroct,
		ws
	} from "@/common/webscroct.js"
	import {
		disposeTime,
		repairZero,
		deepClone
	} from '@/uni_modules/y-chat/components/y-chat/common.js'
	import baseUrl from '@/common/config.js'
	export default {
		data() {
			return {
				// 标题栏配置
				config: {
					title: "消息中心",
					rightSlot: true,
					back: false
				},
				imgApi: 1000,
				phoneHeight: 0,
				cid: [{
						name: "赞",
						Image: "/static/cliend/2187.png",
						id: 0
					},
					{
						name: "评论",
						Image: "/static/cliend/2190.png",
						id: 1
					},
					{
						name: "收藏",
						Image: "/static/cliend/2192.png",
						id: 2
					},
					{
						name: "粉丝",
						Image: "/static/cliend/2194.png",
						id: 3
					}
				],
				list: [],
				systemMessage: [],
				token: '',
				type: null,
				role: {
					1: '设计',
					2: '工厂',
					3: '安装',
					4: '业主'
				},
				designerData: [],
				index: '',
				//群聊
				groupChat: [],
				// SocketTask
				SocketTask: false,
			}
		},
		onLoad(e) {
			uni.$on('index', res => {
				if (res.index == 1) {
					this.getDesigner(1, 10)
				}
			})
			this.getSystemMessages(1, 10)
			this.token = this.$cache.get('token')
			this.type = this.$cache.get('type')
			this.getList()
			this.chatData()
			// this.messageLink()

		},
		// 下拉刷新
		onPullDownRefresh() {
			// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
			setTimeout(() => {
				this.chatData();
				this.messageCenter()
			}, 100);
		},
		onShow() {
			// this.messageCenter()
			this.getSystemMessages(1, 10)
			this.token = this.$cache.get('token')
			this.type = this.$cache.get('type')
			this.getList()
			this.chatData()
			this.messageCenter()
			this.messageLink()
			this.$refs.collapseView.init()
		},
		onHide() {
			uni.closeSocket();
		},
		onUnload() {
			console.log("页面卸载")
			// uni.closeSocket();
		},
		methods: {
			func(index) {
				if (index < 5) {
					return "sculpture";
				} else {
					return "sculptureI"
				}
			},
			messageLink() {
				let token = uni.getStorageSync("token")
				console.log(webScroct, '说张洒洒')
				let url = ws + webScroct + '/websocket/groupList/' + token
				console.log('url', url)
				// 连接
				this.SocketTask = uni.connectSocket({
					url: url,
					fail(e) {
						console.log("连接失败")
					},
					success() {
						console.log("连接成功")
					},
					complete: () => {}
				});
				// 监听开启
				this.SocketTask.onOpen(() => {
					// 将连接状态设为已连接
					console.log('将连接状态设为已连接');
				})
				// 监听关闭
				this.SocketTask.onClose(() => {})
				// 监听错误
				this.SocketTask.onError(() => {
					// this.
					console.log('连接错误');
				})
				// 监听接收信息
				this.SocketTask.onMessage((e) => {
					console.log(JSON.parse(e.data), 'zxc分色分色虚');
					this.groupChat.forEach((res, index) => {
						if (JSON.parse(e.data).groupNum == res.groupNum) {
							res.content = JSON.parse(e.data).content
							res.unReadCount = JSON.parse(e.data).unReadCount
						}
					})
				})
			},
			vdrtdr(e, data, name) {
				uni.closeSocket();
				this.$cache.set('cscs', data)
				this.$cache.set('cf', name) //项目名
				this.$tools.goPageNoAuth('./groupChat?groupNum=' + e)
			},
			messageCenter() {
				this.$api.messageCenter().then((res) => {
					res.data.result.forEach((item) => {
						if (item.createTime == '' || item.createTime == null || item.createTime ==
							undefined) {
							item.createTime = 1
						} else {
							item.createTime = this.$tools.fileTime(item.createTime)

						}

					})
					this.groupChat = res.data.result
					console.log('艾西八大碗', res)
				})
			},
			createAgroup() {
				this.$tools.goPageNoAuth('./inviteChat?title=' + "创建群聊")
			},
			// 分配设计师
			// designerDetermine
			getDesigner(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
					status: 1
				}
				this.$api.designerDetermine(data).then((res) => {
					console.log('宋人头的亚轩', res)
					this.getList()
				})
			},
			getSystemMessages(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
				}
				this.$api.systemMessages(data).then((res) => {
					res.data.result.list.forEach((item) => {
						item.createTime = this.$tools.fileTime(item.createTime)
					})
					if (res.data.result.total == 0) {
						res.data.result.list[0] = {
							headline: '共产家居上线啦!',
							createTime: '2021:10:04',
							information: 'w达瓦大'
						}
					}
					if (num == 1) {
						this.systemMessage = res.data.result.list
					} else {
						this.systemMessage = this.projectList.concat(res.data.result.list)
					}
				})
			},
			chatData() {
				let data = {
					type: this.$cache.get('type')
				}
				this.$api.chatIndex(data).then((res) => {
					let obj = res.data.result
					for (let key in obj) {
						if (obj.hasOwnProperty(key)) {
							obj[key].forEach(item => {
								if (item.sendType == this.$cache.get('type') && item.sendId == this
									.$cache
									.get(
										'id')) {
									item.type = item.receiveType
								} else {
									item.type = item.sendType
								}
								item.time = this.$tools.fileTime(item.time)
							});
						}
					}
					this.list = obj
					console.log(this.list, 'zxcxzcx');
					uni.stopPullDownRefresh();
				})
			},
			getList() {
				let a = uni.getSystemInfoSync().statusBarHeight
				uni.getSystemInfo({
					success: (res) => {
						// 可使用窗口高度，将px转换rpx
						this.phoneHeight = ((res.windowHeight * (750 / res.windowWidth)) - (a * 2) -
							80)
					}
				})
			},
			switchTab(e) {
				switch (e) {
					case 0:
						this.$tools.goPageNoAuth('/clientEnd/page/chat/like')
						break;
					case 1:
						this.$tools.goPageNoAuth('/clientEnd/page/chat/collection')
						break;
					case 2:
						this.$tools.goPageNoAuth('/clientEnd/page/chat/comments')
						break;
					case 3:
						this.$tools.goPageNoAuth('/clientEnd/page/chat/fans')
						break;
					default:
						//this code will execute if none of the cases match the expression
						break;
				}
			},
			// 系统消息
			goSystem(e) {
				this.$tools.goPageNoAuth('/clientEnd/page/chat/systemMessages')
			},
			gogits(e) {
				//不要问我为什么不包对象，一寸长一寸强
				if (e.sendType == this.$cache.get('type') && e.sendId == this.$cache.get('id')) {
					e.type = e.receiveType
					e.idd = e.receiveId
				} else {
					e.type = e.sendType
					e.idd = e.sendId
				}
				console.log(e, '宣传宣传')
				uni.navigateTo({
					url: './User-Chat?id=' + e.receiveId + '&title=' + e.title + '&type=' + e.type +
						'&myName=' + e
						.myName + '&myIcon=' + e.myAvatar + '&avatar=' + e.avatar + '&sendId=' + e.idd
				})
			},
			scrolltolower() {
				console.log('达瓦达瓦大')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sculpture {
		width: 60rpx;
		height: 60rpx;
		min-width: 36rpx;
		min-height: 36rpx;
		border-radius: 50%;
	}

	.sculptureI {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.otherfu {
		width: calc(100% /4);
		display: flex;
		margin-top: 30rpx;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.edit {
		color: #009BFF;
		font-size: 32rpx;
		margin-right: 30rpx;
	}

	.msese {
		width: 52rpx;
		height: 26rpx;
		background: #FF0000;
		border-radius: 18rpx;
		color: #FFF;
		font-size: 20rpx;
		text-align: center;
		line-height: 26rpx;
		opacity: 1;
	}
</style>